<template>
  <div class="page light">
    <div class="xquimini-main" style="padding-top: 20px">

      <div class="pug-page-header-heading">
        <div class="pug-page-header-heading-left"><span class="pug-page-header-heading-title"
                                                        title="搜索列表（项目）">搜索列表（项目）</span></div>
      </div>
      <div class="table-search-fieldset">
        <div style="clear: both">
          <form action="" class="xqui-form xqui-form-pane">
            <div class="xqui-form-item">
              <div class="xqui-inline"><label class="xqui-form-label">关键词</label>
                <div class="xqui-input-inline"><input autocomplete="off" class="xqui-input" type="text"
                                                      v-model.lazy.trim="conditionVal"></div>
              </div>
              <div class="xqui-inline">
                <button @click.prevent="findUserList" class="xqui-btn xqui-btn-primary"
                        lay-filter="data-search-btn" lay-submit="" type="submit">搜 索
                </button>
                <router-link to="/book/add">
                  <button class="xqui-btn xqui-btn-primary"
                          lay-filter="data-search-btn" lay-submit="" type="submit">添 加
                  </button>
                </router-link>
              </div>

            </div>
          </form>
        </div>
      </div>

    </div>
    <main class="pug-pro-basicLayout-content mt40 pug-pro-basicLayout-has-header">
      <div class="pug-pro-page-container">
        <div class="pug-pro-grid-content">
          <div class="pug-pro-grid-content-children">
            <div class="pug-pro-layout-watermark-wrapper" style="position: relative;">
              <div class="pug-pro-page-container-children-content">
                <div class="cardList___3xaWz">
                  <div class="pug-list pug-list-split pug-list-grid">
                    <div class="pug-spin-nested-loading">
                      <div class="pug-spin-container">
                        <div class="pug-row" style="margin-left: -8px; margin-right: -8px; row-gap: 0px;">
                          <div style="width: 25%; max-width: 25%;">
                            <div class="pug-col"
                                 style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;">
                              <div class="pug-list-item">
                                <button type="button" class="pug-btn pug-btn-dashed newButton___d7XLd"><span
                                  role="img" aria-label="plus" class="anticon anticon-plus"><svg
                                  viewBox="64 64 896 896" focusable="false" data-icon="plus" width="1em"
                                  height="1em" fill="currentColor" aria-hidden="true"><path
                                  d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path
                                  d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span><span> 新增产品</span>
                                </button>
                              </div>
                            </div>
                          </div>
                          <div style="width: 25%; max-width: 25%;">
                            <div class="pug-col"
                                 style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;">
                              <div class="pug-list-item">
                                <div class="pug-card pug-card-bordered pug-card-hoverable card___2UcUB">
                                  <div class="pug-card-body">
                                    <div class="pug-card-meta">
                                      <div class="pug-card-meta-avatar"><img alt=""
                                                                             class="cardAvatar___1IXn2"
                                                                             src="https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png">
                                      </div>
                                      <div class="pug-card-meta-detail">
                                        <div class="pug-card-meta-title"><a>Alipay</a></div>
                                        <div class="pug-card-meta-description">
                                          <div
                                            class="pug-typography pug-typography-ellipsis pug-typography-ellipsis-multiple-line item___12yPk"
                                            direction="ltr" style="-webkit-line-clamp: 3;">
                                            在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <ul class="pug-card-actions">
                                    <li style="width: 50%;"><span><a>操作一</a></span></li>
                                    <li style="width: 50%;"><span><a>操作二</a></span></li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div style="width: 25%; max-width: 25%;">
                            <div class="pug-col"
                                 style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;">
                              <div class="pug-list-item">
                                <div class="pug-card pug-card-bordered pug-card-hoverable card___2UcUB">
                                  <div class="pug-card-body">
                                    <div class="pug-card-meta">
                                      <div class="pug-card-meta-avatar"><img alt=""
                                                                             class="cardAvatar___1IXn2"
                                                                             src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png">
                                      </div>
                                      <div class="pug-card-meta-detail">
                                        <div class="pug-card-meta-title"><a>Angular</a></div>
                                        <div class="pug-card-meta-description">
                                          <div
                                            class="pug-typography pug-typography-ellipsis pug-typography-ellipsis-multiple-line item___12yPk"
                                            direction="ltr" style="-webkit-line-clamp: 3;">
                                            在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <ul class="pug-card-actions">
                                    <li style="width: 50%;"><span><a>操作一</a></span></li>
                                    <li style="width: 50%;"><span><a>操作二</a></span></li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div style="width: 25%; max-width: 25%;">
                            <div class="pug-col"
                                 style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;">
                              <div class="pug-list-item">
                                <div class="pug-card pug-card-bordered pug-card-hoverable card___2UcUB">
                                  <div class="pug-card-body">
                                    <div class="pug-card-meta">
                                      <div class="pug-card-meta-avatar"><img alt=""
                                                                             class="cardAvatar___1IXn2"
                                                                             src="https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png">
                                      </div>
                                      <div class="pug-card-meta-detail">
                                        <div class="pug-card-meta-title"><a>Ant Design</a></div>
                                        <div class="pug-card-meta-description">
                                          <div
                                            class="pug-typography pug-typography-ellipsis pug-typography-ellipsis-multiple-line item___12yPk"
                                            direction="ltr" style="-webkit-line-clamp: 3;">
                                            在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <ul class="pug-card-actions">
                                    <li style="width: 50%;"><span><a>操作一</a></span></li>
                                    <li style="width: 50%;"><span><a>操作二</a></span></li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div style="width: 25%; max-width: 25%;">
                            <div class="pug-col"
                                 style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;">
                              <div class="pug-list-item">
                                <div class="pug-card pug-card-bordered pug-card-hoverable card___2UcUB">
                                  <div class="pug-card-body">
                                    <div class="pug-card-meta">
                                      <div class="pug-card-meta-avatar"><img alt=""
                                                                             class="cardAvatar___1IXn2"
                                                                             src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png">
                                      </div>
                                      <div class="pug-card-meta-detail">
                                        <div class="pug-card-meta-title"><a>Ant Design Pro</a></div>
                                        <div class="pug-card-meta-description">
                                          <div
                                            class="pug-typography pug-typography-ellipsis pug-typography-ellipsis-multiple-line item___12yPk"
                                            direction="ltr" style="-webkit-line-clamp: 3;">
                                            在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <ul class="pug-card-actions">
                                    <li style="width: 50%;"><span><a>操作一</a></span></li>
                                    <li style="width: 50%;"><span><a>操作二</a></span></li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div style="width: 25%; max-width: 25%;">
                            <div class="pug-col"
                                 style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;">
                              <div class="pug-list-item">
                                <div class="pug-card pug-card-bordered pug-card-hoverable card___2UcUB">
                                  <div class="pug-card-body">
                                    <div class="pug-card-meta">
                                      <div class="pug-card-meta-avatar"><img alt=""
                                                                             class="cardAvatar___1IXn2"
                                                                             src="https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png">
                                      </div>
                                      <div class="pug-card-meta-detail">
                                        <div class="pug-card-meta-title"><a>Bootstrap</a></div>
                                        <div class="pug-card-meta-description">
                                          <div
                                            class="pug-typography pug-typography-ellipsis pug-typography-ellipsis-multiple-line item___12yPk"
                                            direction="ltr" style="-webkit-line-clamp: 3;">
                                            在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <ul class="pug-card-actions">
                                    <li style="width: 50%;"><span><a>操作一</a></span></li>
                                    <li style="width: 50%;"><span><a>操作二</a></span></li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div style="width: 25%; max-width: 25%;">
                            <div class="pug-col"
                                 style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;">
                              <div class="pug-list-item">
                                <div class="pug-card pug-card-bordered pug-card-hoverable card___2UcUB">
                                  <div class="pug-card-body">
                                    <div class="pug-card-meta">
                                      <div class="pug-card-meta-avatar"><img alt=""
                                                                             class="cardAvatar___1IXn2"
                                                                             src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png">
                                      </div>
                                      <div class="pug-card-meta-detail">
                                        <div class="pug-card-meta-title"><a>React</a></div>
                                        <div class="pug-card-meta-description">
                                          <div
                                            class="pug-typography pug-typography-ellipsis pug-typography-ellipsis-multiple-line item___12yPk"
                                            direction="ltr" style="-webkit-line-clamp: 3;">
                                            在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <ul class="pug-card-actions">
                                    <li style="width: 50%;"><span><a>操作一</a></span></li>
                                    <li style="width: 50%;"><span><a>操作二</a></span></li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div style="width: 25%; max-width: 25%;">
                            <div class="pug-col"
                                 style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;">
                              <div class="pug-list-item">
                                <div class="pug-card pug-card-bordered pug-card-hoverable card___2UcUB">
                                  <div class="pug-card-body">
                                    <div class="pug-card-meta">
                                      <div class="pug-card-meta-avatar"><img alt=""
                                                                             class="cardAvatar___1IXn2"
                                                                             src="https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png">
                                      </div>
                                      <div class="pug-card-meta-detail">
                                        <div class="pug-card-meta-title"><a>Vue</a></div>
                                        <div class="pug-card-meta-description">
                                          <div
                                            class="pug-typography pug-typography-ellipsis pug-typography-ellipsis-multiple-line item___12yPk"
                                            direction="ltr" style="-webkit-line-clamp: 3;">
                                            在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <ul class="pug-card-actions">
                                    <li style="width: 50%;"><span><a>操作一</a></span></li>
                                    <li style="width: 50%;"><span><a>操作二</a></span></li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div style="width: 25%; max-width: 25%;">
                            <div class="pug-col"
                                 style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;">
                              <div class="pug-list-item">
                                <div class="pug-card pug-card-bordered pug-card-hoverable card___2UcUB">
                                  <div class="pug-card-body">
                                    <div class="pug-card-meta">
                                      <div class="pug-card-meta-avatar"><img alt=""
                                                                             class="cardAvatar___1IXn2"
                                                                             src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png">
                                      </div>
                                      <div class="pug-card-meta-detail">
                                        <div class="pug-card-meta-title"><a>Webpack</a></div>
                                        <div class="pug-card-meta-description">
                                          <div
                                            class="pug-typography pug-typography-ellipsis pug-typography-ellipsis-multiple-line item___12yPk"
                                            direction="ltr" style="-webkit-line-clamp: 3;">
                                            在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <ul class="pug-card-actions">
                                    <li style="width: 50%;"><span><a>操作一</a></span></li>
                                    <li style="width: 50%;"><span><a>操作二</a></span></li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <div class="xquimini-main">
      <div class="xqui-table-page">
        <pug-page
          :page-index="currentPage"
          :total="count"
          :page-size="pageSize"
          @change="pageChange">
        </pug-page>
      </div>
    </div>
  </div>
</template>

<script>

import PugPage from '@/components/page/PugPage'

export default {
  name: "Course.vue",
  components: {
    PugPage
  },
  data() {
    return {
      pageSize: 20, //每页显示20条数据
      currentPage: 1, //当前页码
      count: 100, //总记录数
      items: [
        {code: 1, name: " 编程到底该如何学习？", nickname: "xxxxx", sex: 1},
        {code: 2, name: "学习编程之前你要了解的知识！", nickname: "xxxxx", sex: 1},
        {code: 3, name: "工欲善其事，必先利其器！", nickname: "xxxxx", sex: 1},
        {code: 4, name: "基础决定你未来的高度！", nickname: "xxxxx", sex: 1},
        {code: 5, name: "程序的本质就是这些！", nickname: "xxxxx", sex: 1},
        {code: 6, name: "利用集合高效解决问题！", nickname: "xxxxx", sex: 1},
        {code: 7, name: "从零开始开发游戏！", nickname: "xxxxx", sex: 1},
        {code: 8, name: "日常开发必备知识！", nickname: "xxxxx", sex: 1},
        {code: 9, name: "最简单的数据结构！", nickname: "xxxxx", sex: 1},
        {code: 10, name: "Java进阶必会技能！", nickname: "xxxxx", sex: 1},
      ]
    }
  },
  methods: {
    //获取数据
    getList() {

    },

    //从page组件传递过来的当前page
    pageChange(page) {
      this.currentPage = page
    }
  },
  mounted() {
    //请求第一页数据
    this.getList()
  }
}
</script>

<style scoped>


</style>
